﻿<template>
  <el-dialog v-drag title = '上传图片' :visible.sync = 'visibleDialog' width = '50%'
  :close-on-press-escape = 'false' :close-on-click-modal = 'false' append-to-body :before-close = 'closeImportDialog'>
    <el-form label-position = 'top' v-loading = 'progressLoading' :element-loading-text = 'progressLoadingText' element-loading-spinner = "el-icon-loading"
    >
      <el-form-item label = '请选择需要上传的图片：'>
        <el-upload :action = 'actionUrl' :auto-upload = "true" :http-request = "submitUpload" accept = 'image/*'
        :file-list = 'fileList' list-type = "picture-card">
          <i class = "el-icon-plus"></i>
        </el-upload>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import axios from 'axios'
export default {
  props: ['showUploadDialog'],
  data () {
    return {
      visibleDialog: false,
      // 导入时的loading显示
      progressLoadingText: '图片上传中...',
      progressLoading: false,
      // 上传相关
      actionUrl: `${$URL.IMG_UPLOAD_URL}`,
      fileReader: '',
      fileList: []
    }
  },
  mounted () {
    if (!window.FileReader) {
      this.$message({
        message: '您的浏览器不支持 FileReader API',
        type: 'error'
      })
    } else {
      this.fileReader = new FileReader()
    }
    this.initComponent()
  },
  methods: {
    // 初始化页面信息
    initComponent () {
      // 初始化下载相关的信息
      this.fileList = []
      // 类型为progressBar时的信息
      this.progressLoading = false
    },
    // 关闭导入的弹窗时
    closeImportDialog () {
      this.$emit('giveUploadImg')
    },
    // 上传文件的方法
    submitUpload (options) {
      this.progressLoading = true
      let file = options.file
      let filename = file.name
      let fileLength = file.size
      if (file) {
        this.fileReader.readAsDataURL(file)
      }
      this.fileReader.onload = () => {
        let base64Str = this.fileReader.result
        axios({
          url: $URL.IMG_UPLOAD_URL + '/fileset/upload',
          method: 'post',
          data: {
            file_name: filename,
            file_length: fileLength,
            file_content: base64Str.split(',')[1]
          }
        }).then(data => {
          let dataResult = data.data.result
          if (dataResult.code === 'success') {
            let url = dataResult.link_url.replace('/dl/', '/')
            this.progressLoading = false
            this.$message({
              message: '上传成功',
              type: 'success',
              duration: 1500
            })
            this.$emit('uploadImgSuccess', url)
          } else {
            this.progressLoading = false
            this.$message({
              message: '上传失败',
              type: 'error'
            })
            this.$emit('giveUploadImg')
          }
        }).catch(() => {
          this.progressLoading = false
          this.$message({
            message: '上传失败',
            type: 'error'
          })
          this.$emit('giveUploadImg')
        })
      }
    }
  },
  watch: {
    showUploadDialog: {
      handler: function (val, oldVla) {
        this.visibleDialog = val
        if (val) {
          this.initComponent()
        }
      }
    }
  }
}
</script>
